import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import ListTable from 'components/ListTable'
import getDownloadList from 'graphql/project/download/downloadList.graphql'
import getDownloadPageInfo from 'graphql/project/download/pageInfo.graphql'
import Icons from 'utils/constents/icons'
import { Header, Image, Icon } from 'semantic-ui-react'
import moment from 'moment'
import 'moment/locale/zh-cn'
import { formatBytes } from 'utils/func'

moment.locale('zh-cn')

const dataOpts = [
  {
    src: Icons.MORE,
    text: '更多',
  },
]

const FileList = url => ({ data }) => (
  <React.Fragment>
    {data.task.map(task => (
      <ListTable.Row>
        <ListTable.Cell>{task.info.description}</ListTable.Cell>
        <ListTable.Cell>
          <Header as="h5">
            <Image circular src={task.user_object.avatar} />
            <Header.Content>
              {task.user_object.name}
              <Header.Subheader>{`创建于: ${moment(task.create_at).fromNow()}`}</Header.Subheader>
            </Header.Content>
          </Header>
        </ListTable.Cell>
        {task.status === 'working' && <ListTable.Loading>执行中</ListTable.Loading>}
        {task.status === 'created' && <ListTable.Loading>已创建</ListTable.Loading>}
        {task.status === 'queued' && <ListTable.Loading>排队中</ListTable.Loading>}
        {task.status === 'finished' && (
          <ListTable.Cell>
            <Header as="h5">
              <Icon name="download" />
              <Header.Content>
                <a
                  href={task.output.url}
                  download={
                    task.info.description ? `${task.info.description}.zip` : 'annotations.zip'
                  }
                >
                  下载
                </a>
                <Header.Subheader>{formatBytes(task.output.size)}</Header.Subheader>
              </Header.Content>
            </Header>
          </ListTable.Cell>
        )}
        <ListTable.Action width={2} options={dataOpts} />
      </ListTable.Row>
    ))}
  </React.Fragment>
)

class DatasetData extends Component {
  componentDidMount = () => {}

  render() {
    const { match, project } = this.props
    const { projectId } = project
    const newTask = `${match.url}/new`
    const globalActions = [
      {
        text: '创建下载任务',
        url: newTask,
      },
    ]
    const RenderList = FileList(match.url)
    return (
      <ListTable
        subscription
        globalActions={globalActions}
        pagination={{
          query: getDownloadPageInfo,
          name: 'task_aggregate',
          variables: {
            pid: projectId,
          },
        }}
        listData={{
          query: getDownloadList,
          variables: {
            pid: projectId,
            limit: 10,
          },
          header: (
            <ListTable.Header>
              <ListTable.HeaderCell
                style={{
                  wordBreak: 'keep-all',
                  whiteSpace: 'nowrap',
                }}
              >
                任务描述
              </ListTable.HeaderCell>
              <ListTable.HeaderCell>创建信息</ListTable.HeaderCell>
              <ListTable.HeaderCell>输出</ListTable.HeaderCell>
              <ListTable.HeaderCell />
            </ListTable.Header>
          ),
          render: <RenderList />,
        }}
        holder={{
          description: '没有下载任务',
          action: {
            text: '创建下载任务',
            url: newTask,
          },
        }}
      />
    )
  }
}

const mapDispatchToProps = {
  link: path => push(path),
}

export default connect(
  null,
  mapDispatchToProps,
)(DatasetData)
